<template>
	<view class="content">
		<view class="box" v-for="item in list" :key="item.id">
			<view class="pic">
				<image :src="item.scene_pic_url" mode="widthFix"></image>
			</view>
			<view class="title">
				{{item.title}}
			</view>
			<view class="subtitle">
				{{item.subtitle}}
			</view>
			<view class="price">
				{{item.price_info | priceFormat}}
			</view>

		</view>
		<view class="next">
			<button @click="next(1)">上一页</button>
			<button @click="next(2)">下一页</button>
		</view>
		<customTabBar></customTabBar>
	</view>
</template>

<script>
	import customTabBar from "@/custom-tab-bar/index.vue"
	import {
		ApiTopic
	} from '@/utils/api.js';
	export default {
		data() {
			return {
				list: [],
			}
		},
		components: {
			customTabBar
		},
		onShow() {
			this.$store.commit('changeTabbarIndex', 1);
		},
		async onLoad() {
			let res = await ApiTopic({
				page: 1
			})
			// console.log(res);
			this.list = res.data.data;
			// console.log(this.list);
		},
		methods: {
			async next(val) {
				let res = await ApiTopic({
					page: val
				})
				this.list = res.data.data;
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
			}
		}
	}
</script>
<style lang="scss">
	.content {
		background-color: #efefef;
		padding-bottom: 20rpx;
	}

	.box {
		margin-bottom: 30rpx;
		background-color: white;
		padding-bottom: 25rpx;
		box-sizing: border-box;
	}

	.pic {
		margin-bottom: 15rpx;

		image {
			width: 100%;
			height: 280px;
		}
	}

	.title {
		font-size: 34rpx;
		color: #1f1f1f;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.subtitle {
		font-size: 30rpx;
		color: #1f1f1f;
		text-align: center;
		margin-bottom: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.price {
		color: #9b0000;
		text-align: center;
		font-size: 24rpx;
	}

	.next {
		width: 100%;
		height: 200rpx;
		background-color: #efefef;
		margin-bottom: 44rpx;
		display: flex;

		button {
			text-align: center;
			width: 50%;
			height: 80rpx;
			font-size: 30rpx
		}
	}
</style>
